<template>
  <div class="search">
    <h1>巡更记录</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>开始日期</span>
    <el-date-picker
      v-model="time"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      style="margin-right: 20%"
    />
    <br />
    <span>执行状态</span>
    <el-select
      v-model="execute_status"
      placeholder="请选择"
      style="width: 200px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <span style="margin-left: 50px">任务名称</span>
    <el-input
      v-model="task_name"
      style="width: 200px; margin-right: 5%"
      placeholder="请输入"
    />
    <el-button type="primary">查询</el-button>
    <el-button type="default">重置</el-button>
  </div>
  <div class="page">
    <div class="page-header">
      <span>记录列表</span>
      <el-button type="default" style="margin-top: 1rem; margin-right: 4rem"
        >批量操作</el-button
      >
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" />
      <el-table-column property="" label="任务名称" />
      <el-table-column property="" label="巡更人员" />
      <el-table-column property="" label="开始时间" />
      <el-table-column property="" label="结束时间" />
      <el-table-column property="" label="执行状态" />
      <el-table-column property="" label="关联计划" />
      <el-table-column property="" label="操作" />
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        style="margin-bottom: 2rem"
        background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ElTable } from "element-plus";
import { ref } from "vue";

const time = ref("");
const execute_status = ref("");
const task_name = ref("");

const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([]);

const options = [
  {
    value: "",
    label: "全部",
  },
  {
    value: "按时完成",
    label: "按时完成",
  },
  {
    value: "超时完成",
    label: "超时完成",
  },
  {
    value: "未完成",
    label: "未完成",
  },
];

const reset = () => {
  time.value = "";
  execute_status.value = "";
  task_name.value = "";
  get();
}

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
}

const handleCurrentChange = (newNum) => {
  pageNum.value = newNum;
}

const get = () => {
  
}
</script>

<style scoped>
.search {
  background-color: white;
  padding-bottom: 2rem;
  height: auto;
  margin-top: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin-top: 2rem;
  margin-left: 3rem;
  margin-right: 1rem;
  height: 24px;
}

.page {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  display: flex;
  margin-top: 2rem;
  justify-content: center;
}
</style>
